<template>
	<cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn />
			<cl-query
				field="type" :list="typeDicts"
			></cl-query>
		</el-row>

		<el-row>
			<cl-table :ref="setRefs('table')" v-bind="table" @row-click="onRowClick">
				<!-- 名称 -->
				<template #column-name="{ scope }">
					<span>{{ scope.row.cat_name }}</span>
				</template>

				<!-- 图标 -->
				<template #column-cover="{ scope }">
					<gdshop-cover :modelValue="scope.row.cover" :baseUrl="baseUrl" />
				</template>

				<template #slot-move="{ scope }">
					<el-button type="text" size="mini" @click="toMove(scope.row)">移动</el-button>
				</template>
				<!-- 行新增 -->
				<template #slot-add="{ scope }">
					<el-button
						v-if="scope.row.jump_url == ''"
						type="text"
						size="mini"
						@click="upsertAppend(scope.row)"
						>新增</el-button
					>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination :props="{ layout: 'total' }" />
		</el-row>

		<!-- 编辑 -->
		<cl-upsert :ref="setRefs('upsert')"
				   :items="upsert.items"
				   :on-submit="onUpsertSubmit">
			<template #slot-parent_id="{ scope }">
				<div v-show="(scope.parent_id < 1 || scope.parent_id == null)">
					<el-tag size="medium">无父级</el-tag>
				</div>
				<div v-show="scope.parent_name">
				<el-tag size="medium">{{ scope.parent_name || "无父级" }}</el-tag>
				</div>
				<div v-show="scope.id > 0 && scope.parent_id > 0">
					<el-tag size="medium">不允许修改</el-tag>
				</div>
			</template>
			<template #slot-type="{ scope }">
				<div v-if="scope.parent_id > 0">
					<el-tag size="medium">跟随父级</el-tag>
				</div>
				<div v-else-if="scope.id == null && (scope.parent_id < 1 || scope.parent_id == null)">
					<el-radio v-model="scope.type" v-for="(d , i) in typeDicts" :label="d.value">{{ d.label }}</el-radio>
				</div>
				<div v-else>
					<el-tag size="medium">不可修改</el-tag>
				</div>
			</template>
			<template #slot-cover="{ scope }">
				<cover-select v-model="scope.cover" :baseUrl="baseUrl"></cover-select>
			</template>
		</cl-upsert>
	</cl-crud>

	<!-- 分类移动 -->
	<gdshop-category-move
		:ref="setRefs('category-move')"
		:categoryTypeStr="'cms'"
		moveFnOne="cms"
		moveFnTwo="category"
		@success="refresh({ page: 1 })"
	/>
</template>

<script lang="ts">
import { useRefs } from "/@/core";
import { deepTree } from "/@/core/utils";
import { useRouter } from "vue-router";
import { defineComponent, inject, reactive, ref } from "vue";
import { CrudLoad, Table, Upsert, RefreshOp } from "/$/crud/types";
import { ElMessageBox } from "element-plus";

export default defineComponent({
	name: "category-list",
	setup() {
		const router = useRouter();
		const { refs, setRefs } = useRefs();
		const service = inject<any>("service");
		const typeDicts = reactive([
			{
				label: "文章",
				value: 1
			},
			{
				label: "幻灯片",
				value: 2
			},
			{
				label: "单页",
				value: 3
			},
			{
				label: "友情链接",
				value: 4
			}
		]);
		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			ctx.service(service.cms.category).done();
			app.refresh();
		}

		// 刷新监听
		function onRefresh(params: any, { render }: RefreshOp) {
			params['type_str'] = "cms"
			service.cms.category.list(params).then((list: any[]) => {
				render(deepTree(list, "parent_id"), {
					total: list.length
				});
			});
		}
		// 刷新列表
		function refresh(params: any) {
			refs.value.crud.refresh(params);
		}
		async function toMove(e?: any) {
			ElMessageBox.confirm(`请不要选择自己和自己的子级`, "提示", {
				confirmButtonText: "好的我知道了",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					refs.value["category-move"].toMove([e.id]);
				})
				.catch(() => null);
		}

		// 行点击展开
		function onRowClick(row: any, column: any) {
			if (column.property && row.children) {
				refs.value.table.toggleRowExpansion(row);
			}
		}

		// 子集新增
		function upsertAppend(row: any) {
			refs.value.crud.rowAppend({
				parent_id: row.id,
				parent_name: row.cat_name,
				type: row.type
			});
		}

		// 先取到图片地址前缀
		const baseUrl = ref("");
		async function getBaseUrl() {
			await service.gdshop.attachment.getBaseUrl().then((res) => {
				baseUrl.value = res.base_url;
			});
			return baseUrl;
		}
		getBaseUrl();

		// 表格配置
		const table = reactive<Table>({
			props: {
				"row-key": "id"
			},
			"context-menu": [
				(row: any) => {
					return {
						label: "新增",
						callback: (_: any, done: Function) => {
							upsertAppend(row);
							done();
						}
					};
				},
				"update",
				"delete"
			],
			columns: [
				{
					prop: "name",
					label: "分类名称",
					align: "left",
					width: 200
				},
				{
					prop: "cover",
					label: "封面",
					width: 120
				},
				{
					prop: "type",
					label: "类型",
					width: 100,
					dict: typeDicts
				},
				{
					prop: "jump_url",
					label: "跳转URL"
				},
				{
					label: "操作",
					type: "op",
					buttons: ["slot-move", "slot-add", "edit", "delete"]
				}
			]
		});

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			width: "800px",
			items: [
				{
					prop: "type",
					label: "类型",
					span: 24,
					component: {
						name: "slot-type"
					},
					rules: {
						required: true,
						message: "请选择类型"
					}
				},
				{
					prop: "parent_id",
					label: "父类",
					span: 24,
					component: {
						name: "slot-parent_id"
					}
				},
				{
					prop: "cat_name",
					label: "分类名称",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入分类名称"
						}
					},
					rules: {
						required: true,
						message: "名称不能为空"
					}
				},
				{
					prop: "cover",
					label: "图片",
					span: 12,
					component: {
						name: "slot-cover"
					}
				},
				{
					prop: "sort",
					label: "排序号",
					span: 12,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请填写排序号",
							min: 0,
							max: 9999,
							"controls-position": "right"
						}
					}
				},
				{
					prop: "jump_url",
					label: "跳转URL",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写跳转URL"
						}
					}
				}
			]
		});

		// 提交钩子
		function onUpsertSubmit(isEdit: boolean, data: any, { next }: any) {
			console.log(data)
			if (data.parent_id == null) {
				data.parent_id = 0;
			}
			next({
				...data
			});
		}

		return {
			refs,
			table,
			upsert,
			setRefs,
			onLoad,
			onRefresh,
			refresh,
			toMove,
			onRowClick,
			upsertAppend,
			typeDicts,
			baseUrl,
			onUpsertSubmit
		};
	}
});
</script>
